<template>
  <div class="app-container">

    <vxe-grid
      ref="xGrid"
      border
      resizable
      keep-source
      size="small"
      align="center"
      round
      highlight-hover-row
      :loading="loading"
      :pager-config="tablePage"
      :columns="tableColumn"
      :data="tableData"
      :form-config="tableForm"
      :toolbar="{slots: {buttons: 'toolbar_buttons'}}"
      :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
      @page-change="page"
      @form-submit="search"
      @edit-closed="editClosedEvent"
      @edit-actived="editActivedEvent"
    >
      <template v-slot:operate="{ row }">
        <vxe-button v-has="perms.edit" type="text" circle @click="edit(row)"><svg-icon icon-class="bianji" /></vxe-button>
      </template>

      <template v-slot:toolbar_buttons>
        <vxe-button v-has="perms.sync" size="mini" status="primary" icon="fa fa-refresh" @click="syncPerm">同步权限</vxe-button>
      </template>
    </vxe-grid>

    <vxe-modal v-model="dialogVisible" :title="dialogTitle" width="800" :loading="submitLoading" resize destroy-on-close>
      <template v-slot>
        <ele-form
          ref="eleForm"
          v-model="formData"
          :form-desc="formDesc"
          :request-fn="handleSubmit"
          :rules="rules"
          label-position="right"
          :is-dialog="true"
          @close="closeDialog()"
        />
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import api from '@/api/perm'
import menuPermApi from '@/api/menuPermission'
import { mappingPiarArray } from '@/utils/tools'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      dialogVisible: false,
      submitLoading: false,
      perms: {
        sync: 'perm:sync',
        edit: 'perm:edit'
      },
      dialogTitle: '',
      name: 'URL权限',
      tableData: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableForm: {
        data: {
          className: '',
          path: ''
        },
        items: [
          { field: 'className', title: '类名:', itemRender: { name: '$input', props: { placeholder: '请输入', clearable: true }}},
          { field: 'path', title: '路径:', itemRender: { name: '$input', props: { placeholder: '请输入', clearable: true }}},
          { itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' }}, { props: { type: 'reset', content: '重置' }}] }}

        ]
      },
      tableColumn: [
        { type: 'seq', width: 40 },
        { field: 'className', title: '类名' },
        { field: 'path', title: '路径' },
        { field: 'perm', title: '权限', editRender: { name: '$select', options: [], props: { disabled: false, filterable: true }}, formatter(row) {
          if (row.cellValue) {
            return row.cellValue
          } else {
            return '-'
          }
        } },
        { title: '操作', width: 120, fixed: 'right', slots: { default: 'operate' }}

      ],
      formData: {
        name: '',
        seq: '',
        status: '',
        menuPermissionIds: []
      },
      formDesc: {
        className: {
          type: 'text',
          label: '类名'
        },
        path: {
          type: 'text',
          label: '路径'
        },
        perm: {
          type: 'select',
          label: '权限',
          options: []
        }
      }
    }
  },
  mounted() {
  },
  created() {
    this.listData()
    this.getPerms()
  },
  methods: {
    listData() {
      this.loading = true
      this.tableForm.data.page = this.tablePage.currentPage
      this.tableForm.data.pageSize = this.tablePage.pageSize
      api.pageData(this.tableForm.data).then(res => {
        const data = res.data
        this.tableData = data.data
        this.tablePage.currentPage = parseInt(data.page)
        this.tablePage.pageSize = parseInt(data.pageSize)
        this.tablePage.total = parseInt(data.total)
        this.loading = false
      })
    },
    search() {
      this.tablePage.currentPage = 1
      this.listData()
    },
    page({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.listData()
    },
    syncPerm() {
      api.syncPerm().then(res => {
        this.listData()
      })
    },
    editClosedEvent({ row, column }) {
      const xTable = this.$refs.xGrid
      const field = column.property
      // const cellValue = row[field]
      // 判断单元格值是否被修改
      if (xTable.isUpdateByRow(row, field)) {
        // setTimeout(() => {
        //   this.$XModal.message({
        //     message: `局部保存成功！ ${field}=${cellValue}`,
        //     status: 'success'
        //   })
        //   // 局部更新单元格为已保存状态
        //   this.$refs.xTable.reloadRow(row, null, field)
        // }, 300)
        this.handleSubmit(row)
      }
    },
    editActivedEvent({ rowIndex, row }) {
      this.tableColumn[3].editRender.props.disabled = !row.editable
    },
    edit(row) {
      this.eidt = true
      this.resetForm()
      this.dialogVisible = true
      this.dialogTitle = '编辑' + this.name
      api.data(row.id).then(res => {
        this.formData = res.data
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.formData = {}
    },
    resetForm() {
      this.formData = {}
      if (this.$refs.eleForm) {
        this.$refs.eleForm.resetForm()
      }
    },
    handleSubmit(data) {
      this.submitLoading = true
      api.saveOrUpdate(data).then(() => {
        this.listData()
        // 重置formData
        this.formData = {}
        this.dialogVisible = false
        this.submitLoading = false
      })
    },
    getPerms() {
      menuPermApi.perms().then(res => {
        const data = mappingPiarArray([{ permKey: 'label' }, { permKey: 'value' }], res.data)
        this.tableColumn[3].editRender.options = data
        this.formDesc.perm.options = data
      })
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
